<template>
  <view class="tree">
    <!-- <view v-if="currentResult.length == 0" @click="open" class="placeholder">{{ placeholder }}</view>
    <view v-else class="result" @click="open">
      <view v-for="v in currentResult" :key="v.id" class="single">
        <view class="title">{{ v[mate] }}</view>
        <view @click.stop="del(v)" class="delete">删除</view>
      </view>
    </view> -->
    <uni-popup ref="popup">
      <l-header :title="title" noBack></l-header>
      <b-button :param="handlerDeviceParam" @handler="handlerDevice"></b-button>
      <view class="form-module has-btn" :style="{ top: nav ? `calc(${nav.navHeight}px)` : '' }">
        <block v-if="!isSinlge">
          <scroll-view class="scroll-view-box scroll-level" :scroll-y="true">
            <view class="lists">
              <view @click="changeLevel(idx)" class="title" v-for="(item, idx) in data"
                :class="{ 'active': active == idx }" :key="item.id">{{
                  item.title
                }}</view>
            </view>
          </scroll-view>
          <scroll-view class="scroll-view-box scroll-inner" :style="{ 'width': isSinlge ? '100%' : '' }" :scroll-y="true">
            <checkbox-group @change="checkboxChange" class="checkbox">
              <label class="label" v-for="item in current" :key="item.id">
                <view class="value" :class="{ 'active': item.checked }"> {{ item[mate] }}</view>
                <view>
                  <checkbox :value="String(item.id)" :checked="item.checked" />
                </view>
              </label>
            </checkbox-group>
          </scroll-view>
        </block>
        <block v-else>
          <scroll-view class="scroll-view-box scroll-inner" :style="{ 'width': isSinlge ? '100%' : '' }" :scroll-y="true">
            <label class="label" v-for="item in data" :key="item.id">
              <checkbox-group @change="itemCheckboxChange($event, item)" class="checkbox">
                <view class="value" :class="{ 'active': item.checked }"> {{ item[mate] }}</view>
                <view>
                  <checkbox :value="String(item.id)" :checked="item.checked" />
                </view>
              </checkbox-group>
            </label>
          </scroll-view>
        </block>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import bButton from "@/components/button/button";
export default {
  components: { bButton },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    mate: {
      type: String,
      default: "title",
    },
    title: {
      type: String,
      default: "",
    },
    isSinlge: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    nav() {
      return uni.getStorageSync("navInfo");
    },
    level() {
      return this.data;
    }
  },
  data() {
    return {
      placeholder: "请点击此处选择分类",
      result: [],
      dataToOne: [],
      currentResult: [],
      init: true,
      isFirst: false,
      img: ["../../static/img/icon/arrow-s.png", "../../static/img/icon/arrow-down-2.png"],
      handlerDeviceParam: {
        position: "fixed",
        type: "multiple",
        list: [
          {
            title: "取消",
            value: 0,
            color: "#1D246A",
            border: "4upx solid #1D246A",
          },
          {
            title: "确定",
            value: 1,
            bgcolor: "#1D246A",
            color: "#ffffff",
          },
        ],
      },
      active: 0
    };
  },
  watch: {
    data: {
      handler(v) {
        v.length > 0 && this.init && this.recur(v);
      },
      deep: true,
      immediate: true,
    },
    currentResult: {
      handler(v) {
        !this.isFirst && this.$emit("select", this.result.join(","));
      },
      deep: true,
    },
  },
  created() { },
  computed: {
    nav() {
      return uni.getStorageSync("navInfo");
    },
    current() {
      return this.data.length > 0 ? this.data[this.active].child : [];
    }
  },
  mounted() {
    if (this.nav) this.handlerDeviceParam.list.map(v => v.border = `4rpx solid #1D246A`);
  },
  methods: {
    changeLevel(idx) {
      this.active = idx;
    },
    handlerDevice(e) {
      let method = {
        0: () => {
          this.cancel();
        },
        1: () => {
          this.finish();
        },
      };
      method[e]();
    },
    recur(arr) {
      this.init = false;
      if (arr.length > 0) {
        arr.map((v) => {
          this.dataToOne.push(v);
          v.child?.length > 0 && this.recur(v.child);
        });
      }
    },
    recurToSelect(arr) {
      if (arr.length > 0) {
        arr.map((v) => {
          v.checked = this.result.includes(String(v.id));
          v.child?.length > 0 && this.recurToSelect(v.child);
        });
      }
    },
    recurToDel(arr, id) {
      if (arr.length > 0) {
        arr.map((v) => {
          if (v.id == id) v.checked = false;
          v.child?.length > 0 && this.recurToDel(v.child, id);
        });
      }
    },
    checkboxChange(e) {
      this.data[this.active].child.map(v => v.checked = e.detail.value.includes(String(v.id)));
    },
    itemCheckboxChange(e, v) {
      this.data.map(a => {
        if (a.id == v.id) {
          a.child.map(b => b.checked = e.detail.value.includes(String(b.id)));
          a.checked = a.child.every(b => b.checked == true);
        }
      });
    },
    open() {
      this.data.map(v => { if (!v.child) v.child = [{ id: v.id, checked: false, title: '全部' }] });
      this.$refs.popup.open("right");
    },
    cancel() {
      this.$refs.popup.close();
    },
    finish(e) {
      // this.currentResult = this.dataToOne.filter((a) => this.result.some((b) => b == a.id));
      this.currentResult = [];
      this.data.map(v => {
        if (v.child) {
          v.child.map(a => a.checked && this.currentResult.push(a));
        } else {
          v.checked && this.currentResult.push(v);
        }
      });
      this.cancel();
      this.$emit('finish', this.currentResult.map(v => { return v.id }));
    },
    removeDuplicates(arr, key) {
      const uniqueKeys = new Set();
      return arr.filter(obj => {
        const value = obj[key];
        if (!uniqueKeys.has(value)) {
          uniqueKeys.add(value);
          return true;
        }
        return false;
      });
    },
    del(v) {
      this.result = this.result.filter((a) => a != v.id);
      this.currentResult = this.currentResult.filter((a) => a.id != v.id);
      this.recurToDel(this.data, v.id);
    },
  },
};
</script>

<style lang="less" scoped>
// #ifndef MP-WEIXIN
// /deep/ .right {
//   padding-top: calc(var(--status-bar-height)) !important;
// }

// #endif
/deep/ .header {
  background-color: transparent !important;
  pointer-events: none;
}

/deep/ .transition {
  height: 80%;
}

/deep/ .bottom {
  height: 100%;
  background-color: rgb(255, 255, 255) !important;
  // padding: 20upx;
  border-radius: 20upx 20upx 0 0;
}

.pd20 {
  padding: 20upx 20upx 20upx 0;
  height: calc(100% - 80upx);
}

// #ifdef MP-WEIXIN
.pd20 {
  height: calc(100% - 200upx);
}

// #endif

.scroll-view-box {
  height: 100%;
}

.scroll-view-box ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.placeholder {
  color: #c7c7c8;
}

.form-module {
  .flex(row, flex-start);
  border-top: 2upx solid #F5F5F5;
  background-color: #ffffff;
}

.scroll-level {
  width: 180upx;

  .lists {
    padding: 0 20upx;

    .title {
      .flex(row, center);
      margin-top: 40upx;
      padding: 10upx 14upx;
      width: 100%;
      min-height: 60upx;
      font-size: 28upx;
      color: #1D246A;
      border-radius: 20upx;
    }

    .active {
      color: #FFFFFF;
      background: #1D246A;
    }
  }
}


.scroll-inner {
  padding: 0 28upx 0 24upx;
  border-left: 2upx solid #F5F5F5;
  width: calc(100% - 180upx);
  box-sizing: border-box;

  .label {
    .flex();
    width: 100%;
    height: 80upx;

    .checkbox {
      .flex();
      width: 100%;
    }

    &:not(:last-child) {
      border-bottom: 1upx solid #F5F5F5;
    }
  }

  .value {
    font-size: 28upx;
    color: #333333;
  }

  .active {
    color: #1D246A;
  }
}

.result {
  .single {
    .flex();
  }
}

.lists {
  background: #fff;
  padding: 0 0 0 30upx;
}

.checkbox,
.radio {
  .label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10upx 0;

    .value {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 30upx;
      width: 50%;

      image {
        width: 24upx;
        height: 24upx;
        margin-right: 10upx;
      }
    }
  }
}

/deep/ .uni-checkbox-wrapper {
  margin-top: -8upx;
}
</style>
